<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../plugins/editor.md-master/css/editormd.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="../../../plugins/js/jquery-3.3.1.js"></script>
    <script src="../../../plugins/editor.md-master/editormd.min.js"></script>
    <script src="../../../plugins/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js" ></script>
    <script src="../js/blog/blog.js"></script>
    <script src="../../../plugins/js/request.js"></script>
    <script src="../js/blog/api.js"></script>
    <title>Document</title>
    <style>

    </style>
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg opacity-75  " >
        <div class="container-sm  ">
          <a class="navbar-brand text-lg" href="#">Blog</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse " id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item a">
                      <a class="nav-link active "  aria-current="page" href="blogs.html">  <i class="bi bi-house-door"></i> 博客</a>
                  </li>
                  <li class="nav-item a">
                      <a class="nav-link" href="type.html"><i class="bi bi-lightbulb"></i>分类</a>
                  </li>

                  <li class="nav-item a">
                      <a class="nav-link " href="tags.html"> <i class="bi bi-bookmarks"></i>标签</a>
                  </li>
              </ul>
           <div class="m-magen-tiny a " >
             <a href="#" style="text-decoration:none;" class="denglu-pp">

                 <img src="../image/2003390.jpg" class="rounded-circle imgg-tiny" alt="...">
                <span class="" >45</span>
             </a>
           
           </div>
          </div>
        </div>
      </nav>

      <!-- 中间内容 -->
    <div class="m-container-small con-padding-top">
        <div id="Blog">
          <div class="f-bg search-pp rounded  " >
            <div class="input-group mb-3">

                <select class="form-select" id="inputGroupSelect03" style="max-width: 100px" v-model="blog.flag">
                    <option value="原创">原创</option>
                    <option value="转载">转载</option>

                </select>
              <input v-model="blog.title" type="text" class="form-control" aria-label="Text input with dropdown button">
            </div>
            </div>
            <div >
               <div id="md-content"   >
                  <textarea aria-label=""placeholder="博客内容" v-model="blog.content" style="display: none" ></textarea>
               </div>
            </div>
           <div class="row">
            <div class="col-6">
              <div class="input-group mb-3">
                <label class="input-group-text" for="inputGroupSelect01">分类</label>
                <select class="form-select" id="inputGroupSelect01"  v-model="blog.typeId">

                  <option :value=item.id v-for="(item,index) in TypeAndTag.types" :key="item.id" >{{item.name}}</option>

                </select>
              </div>
            </div>
            <div class="col-6">
              <div class="input-group mb-3">
                <label class="input-group-text" for="inputGroupSelect01">标签</label>
                <select class="form-select" id="inputGroupSelect02"  v-model="blog.tagId">
                    <option :value=item.id v-for="item in TypeAndTag.tags" :key="item.id">{{item.name}}</option>
                </select>
              </div>
            </div>
           </div>
           <div class="row">
              <div class="input-group flex-nowrap">
                <span class="input-group-text" id="addon-wrapping">首图</span>
                <input v-model="blog.firstPicture" type="text" class="form-control" placeholder="首图引用的值" aria-label="Username" aria-describedby="addon-wrapping">
              </div>
           </div>
            <div class="row message-top">
              <div class="form-floating">
                <textarea v-model="blog.description" class="form-control" placeholder="博客描述" id="floatingTextarea2" style="height: 100px"></textarea>
                <label for="floatingTextarea2">博客描述......</label>
              </div>
            </div>

            <div class="row message-top">
              <div class="col-6"></div>
              <div class="col-6 text-end">
                <button type="button" class="btn btn-dark">返回</button>
                <button type="button" class="btn btn-success" @click="add" >发布</button>
              </div>
            </div>
        </div>
      
    </div>
    
    <br><br><br><br><br><br><br>
    <div class="container-fluid f-bg sticky-bottom " style="padding-top: 40px;">
      <div class="row clearfix">
          <div class="col-md-12 column">
              <div class="jumbotron">
                  <div class="container">
                      <center>
  
                          <p>Copyright© 2020 All Rights Reserved. </p>
                          <p>试做</p>
                          地址：航空港校区（主校区） &nbsp;&nbsp;&nbsp; 电话:8956584
                          
                      </center>
  
                  </div>
              </div>
          </div>
      </div>
  </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var contentEditor;
        $(function() {
            contentEditor = editormd("md-content", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
                // path    : "../../static/lib/editormd/lib/"
                path    : "../../../plugins/editor.md-master/lib/"
                //path    : "/blog/lib/editormd/lib/"
            });
        });

    new Vue({
        el:"#Blog",
        data() {
            return {
                id:'',
                blog:{
                    flag:'',
                    title:'',
                    content:'',
                    typeId:'',
                    tagId:'',
                    tag:'',
                    firstPicture:'',
                    description:'',
                    id:'',

                },
                TypeAndTag:[],
                addOrUpdate:'add',

            }
        },
        created(){
            this.id=requestUrlParam('id')

            this.Type()
            if(this.id){
                this.addOrUpdate='update'
                this.blog.id=this.id
               this.init()
            }
        },
        methods:{
            //aixos 会返回一个Promise对象
            //async 和 await 基于 promise 的。
            //   使用 async 的函数将会始终返回一个 promise 对象
            //   await 关键字只能放到async 函数里面
            async Type() {


                await TypeAndTags().then(res => {
                    if (String(res.data.code) === '1') {
                        this.TypeAndTag =res.data.data
                        console.log(this.TypeAndTag.types)
                    }
                }).catch(err => {
                    alert("cuowu")
                })
            },

            async init() {


                await postEdit(this.id).then(res => {
                    console.log(res.data.data)
                   this.blog.title=res.data.data.title
                    this.blog.flag=res.data.data.flag
                    this.blog.content=res.data.data.content
                    this.blog.typeId=res.data.data.typeId
                    this.blog.tagId=res.data.data.tagId
                    this.blog.firstPicture=res.data.data.firstPicture
                    this.blog.description=res.data.data.description
                }).catch(err => {
                    alert("cuowu")
                })
            },


            async add(){
                if (this.addOrUpdate==='update'){
                    this.blog.content=$('.editormd-markdown-textarea').val()
                    //alert($('.editormd-markdown-textarea').val())
                    let res =await putEdit(this.blog);
                    if (String(res.data.code) === '1'){
                        alert("登录成功1")
                        window.location.href= 'blogs.html'
                    }else{
                        alert(res.data.msg)
                    }
                }else{
                    this.blog.content=$('.editormd-markdown-textarea').val()
                    //alert($('.editormd-markdown-textarea').val())
                    let res =await postBlog(this.blog);
                    if (String(res.data.code) === '1'){
                        alert("登录成功2")
                        window.location.href= 'blogs.html'
                    }else{
                        alert(res.data.msg)
                    }
                }
            },

        }

    })




</script>
  
</body>
</html>